<template>
  <div>
    <form>
      账号：<input type="text" v-model="account.username">
      密码：<input type="text" v-model="account.password">
    </form>

    <form>
      账号：<input type="text" v-model="username">
      密码：<input type="text" v-model="password">
    </form>
    <hr>
    <ShowInfo name="ding" :age="17"></ShowInfo>
  </div>
</template>

<script>
import {reactive,ref,onMounted} from "vue";
import ShowInfo from './ShowInfo.vue'
export default {
  name: "App2",
  components:{
    ShowInfo
  },
  setup(props,context){

    const info=ref({})

    const account=reactive({
      username:'coderwhy',
      password:'321564'
    })

    const username=ref('coderwhy')
    const password=ref('789456')

    const message=ref('hello world')
    const counter=ref(0)

    const musics=ref([])

    onMounted(()=>{
      musics.value=['erew','rewrew']
    })

    return{
      account,
      username,
      password
    }
  }
}
</script>

<style scoped>

</style>